<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>座位信息页面</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <script type="text/javascript" src="/resources/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script type="text/javascript" src="/resources/layui/layui.js"></script>

    <link rel="stylesheet" href="/resources/layui/css/style.css">

    <script type="text/javascript" src="/resources/js/vip/vip_comm.js"></script>

    <script>
        layui.use('layer', function () {
            var layer = layui.layer;
            $ = layui.jquery
        });

        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    </script>

    <style>
        /*桌子*/
        .desk{
            width: 110px;height: 40px;
            background-color: brown;
            font-size: 14px;
        }
        /*凳子（默认可预定）*/
        .stool{
            width: 46px; height: 20px; font-size: 12px; position: absolute; background-color: green;
        }
        /*已预定的颜色*/
        .stool.stool_on{
            background-color: red;
        }
        /*我的颜色*/
        .stool.stool_my{
            background-color: yellow;
        }
    </style>
</head>

<body>

<c:forEach begin="1" end="${seatGroup}" step="1" var="item">

    <div style="width: 230px;height: 100px;padding-left: 40px;padding-top: 40px;position: relative;float: left">

        <c:if test="${SeatArray[(0+8*(item-1))]!=null}">
            <button class="desk" disabled="disabled">
                <span>${SeatArray[(0+8*(item-1))].getSeatName()}</span>
                <span>${SeatArray[(1+8*(item-1))].getSeatName()}</span>
            </button>

            <button id="${SeatArray[(0+8*(item-1))].getSeatName()}" class="${SeatArray[(0+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(0+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 45px;top: 20px;" onclick="seat('${SeatArray[(0+8*(item-1))].getSeatStatus()}','${SeatArray[0+8*(item-1)].getUserNameSeat()}','${SeatArray[0+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(0+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(0+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
            <button id="${SeatArray[(1+8*(item-1))].getSeatName()}" class="${SeatArray[(1+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(1+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 96px;top: 20px;" onclick="seat('${SeatArray[(1+8*(item-1))].getSeatStatus()}','${SeatArray[1+8*(item-1)].getUserNameSeat()}','${SeatArray[1+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(1+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(1+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
        </c:if>


        <c:if test="${SeatArray[(2+8*(item-1))]!=null}">
            <button class="desk" disabled="disabled">
                <span>${SeatArray[(2+8*(item-1))].getSeatName()}</span>
                <span>${SeatArray[(3+8*(item-1))].getSeatName()}</span>
            </button>

            <button id="${SeatArray[(2+8*(item-1))].getSeatName()}" class="${SeatArray[(2+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(2+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 160px;top: 20px;" onclick="seat('${SeatArray[(2+8*(item-1))].getSeatStatus()}','${SeatArray[2+8*(item-1)].getUserNameSeat()}','${SeatArray[2+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(2+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(2+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
            <button id="${SeatArray[(3+8*(item-1))].getSeatName()}" class="${SeatArray[(3+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(3+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 211px;top: 20px;" onclick="seat('${SeatArray[(3+8*(item-1))].getSeatStatus()}','${SeatArray[3+8*(item-1)].getUserNameSeat()}','${SeatArray[3+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(3+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(3+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
        </c:if>

        <c:if test="${SeatArray[(4+8*(item-1))]!=null}">
            <button class="desk" disabled="disabled">
                <span>${SeatArray[(4+8*(item-1))].getSeatName()}</span>
                <span>${SeatArray[(5+8*(item-1))].getSeatName()}</span>
            </button>
            <button id="${SeatArray[(4+8*(item-1))].getSeatName()}" class="${SeatArray[(4+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(4+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 45px;top: 120px;" onclick="seat('${SeatArray[(4+8*(item-1))].getSeatStatus()}','${SeatArray[4+8*(item-1)].getUserNameSeat()}','${SeatArray[4+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(4+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(4+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
            <button id="${SeatArray[(5+8*(item-1))].getSeatName()}" class="${SeatArray[(5+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(5+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 96px;top: 120px;" onclick="seat('${SeatArray[(5+8*(item-1))].getSeatStatus()}','${SeatArray[5+8*(item-1)].getUserNameSeat()}','${SeatArray[5+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(5+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(5+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
        </c:if>


        <c:if test="${SeatArray[(6+8*(item-1))]!=null}">
            <button class="desk" disabled="disabled">
                <span>${SeatArray[(6+8*(item-1))].getSeatName()}</span>
                <span>${SeatArray[(7+8*(item-1))].getSeatName()}</span>
            </button>
            <button id="${SeatArray[(6+8*(item-1))].getSeatName()}" class="${SeatArray[(6+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(6+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 160px;top: 120px;" onclick="seat('${SeatArray[(6+8*(item-1))].getSeatStatus()}','${SeatArray[6+8*(item-1)].getUserNameSeat()}','${SeatArray[6+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(6+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(6+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
            <button id="${SeatArray[(7+8*(item-1))].getSeatName()}" class="${SeatArray[(7+8*(item-1))].getSeatStatus()==0?"stool":(SeatArray[(7+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'stool_my stool':'stool_on stool')}"
                    style="left: 211px;top: 120px;" onclick="seat('${SeatArray[(7+8*(item-1))].getSeatStatus()}','${SeatArray[7+8*(item-1)].getUserNameSeat()}','${SeatArray[7+8*(item-1)].getSeatName()}')">
                    ${SeatArray[(7+8*(item-1))].getSeatStatus()==0?"预定":(SeatArray[(7+8*(item-1))].getUserNameSeat()==sessionScope.userInfo.userWorkId?'我的':'已预定')}
            </button>
        </c:if>


    </div>

</c:forEach>
<script>
    function seat(status,userSeatName,seatName) {
        // 如果预定的话
        if(status=='1'){

            if(userSeatName =='${sessionScope.userInfo.userWorkId}'){
                var boolean = confirm("您已经预定该座位，需要释放该座位嘛？");
                if(boolean==true){
                    window.location.href="/releaseSeat?userNameSeat="+userSeatName+"&&clazzName="+"${clazzName}";
                }
            }else{
                layer.msg("该座位已经被预定，请您重新预定！");
            }
        }else if(status=='0'){

            if('${userSeatStatus}'==1){

                var boolean =  confirm("您已预约座位，确定要更换座位吗?");
                if(boolean==true){
                    window.location.href="/replaceSeat?userNameSeat="+"${sessionScope.userInfo.userWorkId}"+"&&clazzName="+"${clazzName}"+"&&seatName="+seatName;

                }
            }else{
                var boolean =  confirm("您要预约该座位吗?");
                if(boolean==true){
                    window.location.href="/appointmentSeat?userNameSeat="+"${sessionScope.userInfo.userWorkId}"+"&&clazzName="+"${clazzName}"+"&&seatName="+seatName;

                }
            }
        }


    }
</script>

<div style="position: fixed;bottom: 0px;left: 45%">
    <button id="enterButton" class="layui-btn layui-btn-warm" onclick=" layer.confirm('欢迎来到${clazzName}教室')">入口</button>
</div>
<
</body>
</html>